<script setup>
//watch监听的deep用法，深度监听，监听复杂类型，作用跟vue2一样
/* //vue2写法
data() {
  return {
    count: 0,
    form: {
      name: ''
    }
  }
},
watch: {
  form: {
  //handler不是被外部触发的，是数据变化时被watch触发的
    handler:function(new, old) {

    },
    deep: true
  },
  count(newVal, oldVal) {
    console.log('newVal', newVal)
    console.log('oldVal', oldVal)
  }
} */

/* //使用deep:true监听ref整个对象的变化
import { ref, watch } from 'vue'
const state = ref({count: 0})
const changeCount = () => {
  state.value.count++
}
watch(state, (newVal, oldVal) => {
  console.log('newVal', newVal.count)
  console.log('oldVal', oldVal.count)
}, {
  deep: true
}) */
//监听reactive生成响应式数据对象的变化
import { reactive, watch } from 'vue'
const state = reactive({count: 0})
const changeCount = () => {
  state.count++
}
//watch默认可以对reactive生成的响应式对象进行深度监听，不需要deep:true
watch(state, (newVal, oldVal) => {
  console.log('newVal', newVal.count)
  console.log('oldVal', oldVal.count)
}, {
  deep: true
})
</script>

<template>
  <div>
    <p>count: {{ state.count }}</p>
    <button @click="changeCount">count++</button>
  </div>
</template>

<style lang="scss" scoped>

</style>
